<template>
	<view class="ai-assistant" @tap="openAIChat" :class="{ 'pulse': isPulsing }">
		<view class="assistant-icon">
			<uni-icons type="chat" size="24" color="#fff"></uni-icons>
		</view>
		<view class="assistant-ripple" v-if="showRipple"></view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, onUnmounted } from 'vue';

	const isPulsing = ref(false);
	const showRipple = ref(false);
	let pulseTimer: any = null;
	let rippleTimer: any = null;

	// 打开AI聊天
	const openAIChat = () => {
		// 添加点击动画效果
		showRipple.value = true;
		setTimeout(() => {
			showRipple.value = false;
		}, 600);

		// 跳转到AI聊天页面
		uni.navigateTo({
			url: '/pages/ai-chat/ai-chat'
		});
	};

	// 开始脉冲动画
	const startPulse = () => {
		isPulsing.value = true;
		pulseTimer = setTimeout(() => {
			isPulsing.value = false;
			// 5秒后再次开始脉冲
			setTimeout(startPulse, 5000);
		}, 2000);
	};

	onMounted(() => {
		// 页面加载后开始脉冲动画
		setTimeout(startPulse, 3000);
	});

	onUnmounted(() => {
		// 清理定时器
		if (pulseTimer) {
			clearTimeout(pulseTimer);
		}
		if (rippleTimer) {
			clearTimeout(rippleTimer);
		}
	});
</script>

<style>
	.ai-assistant {
		position: fixed;
		right: 30rpx;
		bottom: 200rpx; /* 避免与底部导航栏重叠 */
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.4);
		z-index: 9999;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.ai-assistant:active {
		transform: scale(0.95);
		box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.6);
	}

	.assistant-icon {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 脉冲动画 */
	.ai-assistant.pulse {
		animation: pulse 2s infinite;
	}

	@keyframes pulse {
		0% {
			box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.4);
		}
		50% {
			box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.4), 0 0 0 20rpx rgba(102, 126, 234, 0.1);
		}
		100% {
			box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.4);
		}
	}

	/* 涟漪效果 */
	.assistant-ripple {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.3);
		animation: ripple 0.6s ease-out;
	}

	@keyframes ripple {
		0% {
			transform: scale(0);
			opacity: 1;
		}
		100% {
			transform: scale(2);
			opacity: 0;
		}
	}
</style>



